<template>
  <div class="register">
    <ul>
      <li>
        <span class="icon-user"></span>
        <input type="number" placeholder="手机号码" v-model="phoneNum">
      </li>
      <li>
        <span class="icon-password"></span>
        <input type="password" placeholder="密码" v-model="passWord" v-if="passWordShow">
        <input type="text" placeholder="密码" v-model="passWord" v-else>        
        <span :class="passWordClass" @click="toggle"></span>
      </li>
      <li>
        <span class="icon-sms"></span>
        <input type="number" placeholder="短信验证码" v-model="smsCode">
        <phone-ver @click="getsms" ref="phonev"></phone-ver>
      </li>
      <li>
        <span class="icon-invite"></span>
        <input type="text" placeholder="选填邀请码(选填)" v-model="inviteNum">
      </li>
    </ul>
    <div class="register-btn">
      <vbutton
        text="立即领取1288元红包"
        @click="register"></vbutton>
    </div>
    <div class="register-footer">
      <p>我已阅读并同意<span @click="toSignupAgreement">《注册协议》</span></p>
      <p>已注册，<span @click="toLogin">立即登录</span></p>
    </div>
  </div>
</template>

<script>
  import vbutton from 'components/common/button'
  import phoneVer from 'components/common/phoneVerification'
  import { isPhoneNum } from '@/tool/check.js'
  import { Toast, Indicator } from 'mint-ui'

  export default {
    props: ['callback'],
    data () {
      return {
        phoneNum: null,
        passWord: null,
        smsCode: null,
        inviteNum: '',
        inviteCode: '',
        passWordShow: true
      }
    },
    computed: {
      passWordClass () {
        return this.passWordShow ? 'icon-eye-close' : 'icon-eye-open'
      }
    },
    methods: {
      getsms () {
        const phonev = this.$refs.phonev
        if (!isPhoneNum(this.phoneNum)) {
          phonev.state = 'init'
          Toast('请输入正确的手机号码')
          return
        }
        if (!this.passWord || this.passWord.length < 6) {
          phonev.state = 'init'
          Toast('密码不能少于6位')
          return
        }
        const loginName = this.phoneNum
        this.$http.post(`/api/member/sendSmsCode?mobile=${loginName}`)
          .then((res) => {
            if (res.data.success) {
              return
            } else {
              phonev.state = 'finished'
              Toast(res.data.msg)
            }
          })
          .catch((err) => {
            console.log(err)
            phonev.state = 'finished'
          })
      },
      toggle () {
        this.passWordShow = !this.passWordShow
      },
      toSignupAgreement () {
        this.$router.push('/signupAgreement')
      },
      toLogin () {
        window.location.href = 'nativejs://' + '{"viewNum":"0"}'
        this.$router.push('/login')
      },
      register () {
        const vm = this
        if (!isPhoneNum(this.phoneNum)) {
          Toast('请输入正确的手机号码')
          return
        }
        if (!this.passWord || this.passWord.length < 6) {
          Toast('密码不能少于6位')
          return
        }
        if (this.smsCode.length !== 6) {
          Toast('验证码错误')
          return
        }
        Indicator.open()
        this.$http.post('/api/member/regist', 'mobile=' + this.phoneNum + '&smsCode=' + this.smsCode + '&password=' + this.passWord + '&channelCode=2&inviteCode=' + this.inviteNum + '&promotionCode=' + this.inviteCode)
          .then((res) => {
            if (res.data.success) {
              Indicator.close()
              Toast('恭喜您，注册成功')
              // 埋点函数
              if (this.callback) {
                this.callback()
              }
              setTimeout(() => {
                // 注册成功后直接登陆
                vm.$http.post(`/api/member/login?loginName=${vm.phoneNum}&password=${vm.passWord}`)
                  .then((res) => {
                    if (res.data.success) {
                      vm.$cookie.set('acctKey', res.data.data, {
                        expires: '7D'
                      })
                      console.log(res.data)
                      Indicator.close()
                      console.log('获取数据成功')
                      vm.$router.push('/mine?from=register')
                    } else {
                      Indicator.close()
                      Toast(res.data.msg)
                    }
                  })
                  .catch((err) => {
                    console.log(err)
                  })
              }, 0)
            } else {
              Indicator.close()
              Toast(res.data.msg)
            }
          })
          .catch((err) => {
            console.log(err)
            Indicator.close()
          })
      }
    },
    created () {
      if (this.$route.query['invitNum'] && this.$route.query['invitNum'] !== '') {
        this.inviteNum = this.$route.query['invitNum']
      }
      if (this.$route.query['c'] && this.$route.query['c'] !== '') {
        this.inviteCode = this.$route.query['c']
      }
    },
    components: {
      vbutton,
      phoneVer
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';
  .register {
    background: $base-fff;
    border-radius: 6px;
    ul {
      font-size: 30px;
      li {
        padding: 0 30px;
        display: flex;
        align-items: center;
        height: 92px;
        border-bottom: 1px solid $base-e5e5e5;
      }
      input {
        flex: 1;
        outline: none;
        margin-left: 20px;
        background: #fff;
      }
    }
    &-btn {
      margin-top: 30px;
      text-align: center;
      font-size: 0;
    }
    &-footer {
      display: flex;
      justify-content: space-between;
      padding: 30px;
      font-size: 26px;
      color: $base-333;
      span {
        color: $base-ff6c00;
        text-decoration: underline;
      }
    }
  }
</style>
